<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>教师管理 - 智能选课系统</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome@6.0.0-beta3/css/all.min.css">
	<style type="text/css">
		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			padding: 20px;
			min-height: 100vh;
		}

		.teacher-container {
			max-width: 1200px;
			margin: 0 auto;
			background: white;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			overflow: hidden;
		}

		.teacher-header {
			background: linear-gradient(135deg, #3498db, #2980b9);
			color: white;
			padding: 20px 30px;
			text-align: center;
		}

		.teacher-header h3 {
			margin: 0;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.teacher-header h3 i {
			margin-right: 10px;
			font-size: 1.5rem;
		}

		.teacher-body {
			padding: 30px;
		}

		.search-form {
			background: #f8f9fa;
			padding: 20px;
			border-radius: 10px;
			margin-bottom: 25px;
		}

		.form-group {
			margin-bottom: 15px;
		}

		.form-label {
			font-weight: 600;
			margin-right: 10px;
			color: #2c3e50;
		}

		.form-control {
			padding: 10px;
			border: 1px solid #ddd;
			border-radius: 5px;
			font-size: 1rem;
			transition: all 0.3s ease;
		}

		.form-control:focus {
			border-color: #3498db;
			box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
			outline: none;
		}

		.btn-search {
			background: linear-gradient(135deg, #3498db, #2980b9);
			color: white;
			border: none;
			padding: 10px 20px;
			border-radius: 5px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.btn-search:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.teacher-table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 20px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		}

		.teacher-table th {
			background: linear-gradient(135deg, #2c3e50, #34495e);
			color: white;
			padding: 15px;
			text-align: center;
			font-weight: 600;
		}

		.teacher-table td {
			padding: 12px;
			text-align: center;
			border-bottom: 1px solid #eaeaea;
		}

		.teacher-table tr:nth-child(even) {
			background: #f9f9f9;
		}

		.teacher-table tr:hover {
			background: #f1f9ff;
		}

		.delete-link {
			display: inline-block;
			padding: 8px 16px;
			background: linear-gradient(135deg, #e74c3c, #c0392b);
			color: white;
			border-radius: 4px;
			text-decoration: none;
			font-weight: 500;
			transition: all 0.3s ease;
		}

		.delete-link:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			color: white;
			text-decoration: none;
		}

		.no-data {
			text-align: center;
			padding: 40px;
			color: #7f8c8d;
		}

		.no-data i {
			font-size: 3rem;
			margin-bottom: 15px;
			display: block;
		}

		@media (max-width: 768px) {
			.teacher-body {
				padding: 20px 15px;
			}

			.teacher-table {
				font-size: 0.9rem;
			}

			.teacher-table th,
			.teacher-table td {
				padding: 8px 4px;
			}

			.delete-link {
				padding: 6px 12px;
				font-size: 0.8rem;
			}
		}.back-btn {
			 display: block;
			 text-align: center;
			 margin-top: 25px;
		 }

		.back-btn a {
			display: inline-block;
			padding: 10px 20px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border-radius: 5px;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.back-btn a:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			text-decoration: none;
			color: white;
		}
	</style>
</head>
<body>
<div class="teacher-container">
	<div class="teacher-header">
		<h3><i class="fas fa-chalkboard-teacher"></i> 教师管理</h3>
	</div>

	<div class="teacher-body">
		<div class="search-form">
			<form name="Seekfrom" action="${pageContext.request.contextPath}/RemoveTeacher_Servlet" method="post" target="_self">
				<div style="display: flex; flex-wrap: wrap; gap: 15px; align-items: center;">
					<div>
						<label class="form-label">搜索方式:</label>
						<label style="margin-right: 10px;">
							<input name="seek" type="radio" value="模糊查询" checked> 模糊查询
						</label>
						<label>
							<input name="seek" type="radio" value="精确查询"> 精确查询
						</label>
					</div>

					<div>
						<label class="form-label">搜索字段:</label>
						<select name="select" class="form-control" style="width: 120px;">
							<option>工号</option>
							<option>姓名</option>
							<option>所在学院</option>
						</select>
					</div>

					<div>
						<input type="text" name="name" class="form-control" placeholder="请输入搜索内容" style="width: 200px;">
					</div>

					<div>
						<button type="submit" class="btn-search"><i class="fas fa-search"></i> 搜索</button>
					</div>
				</div>
			</form>
		</div>

		<c:choose>
			<c:when test="${not empty requestScope.list}">
				<div class="table-responsive">
					<table class="teacher-table">
						<thead>
						<tr>
							<th>工号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>年龄</th>
							<th>所在学院</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody>
						<c:forEach items="${requestScope.list}" var="t">
							<tr>
								<td>${t.getNo()}</td>
								<td>${t.getName()}</td>
								<td>${t.getSex()}</td>
								<td>${t.getAge()}</td>
								<td>${t.getCollage()}</td>
								<td>
									<c:choose>
										<c:when test="${t.isTeaching()}">
											<span style="color: red;">正在授课</span>
										</c:when>
										<c:otherwise>
											<a href="${pageContext.request.contextPath}/RemoveTeacher_Servlet?id=remove&No=${t.getNo()}" class="delete-link">
												<i class="fas fa-trash-alt"></i> 删除
											</a>
										</c:otherwise>
									</c:choose>
								</td>
							</tr>
						</c:forEach>
						</tbody>
					</table>
				</div>
			</c:when>
			<c:otherwise>
				<div class="no-data">
					<i class="fas fa-chalkboard-teacher"></i>
					<h4>暂无教师数据</h4>
					<p>请先搜索或添加教师</p>
				</div>
			</c:otherwise>
		</c:choose>
	</div>
</div>
<div class="back-btn">
	<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
</div>
</body>
</html>